@import "../../common/variables.scss";

$barHeight: 44px;
$filesWidth: 20px;
$filesHeight: 17px;
$barLeft: 50px;

.inputWrap {
  width: 550px;
  height: 44px;
  padding-left: $barLeft;
  box-sizing: border-box;
  border-radius: 137.63px;
  background: $mainBg;
  line-height: 28px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-family: sans-serif;
  text-align: left;
  vertical-align: middle;

  &:before {
    content:"";
    display:block;
    position:absolute;
    top: 50%;
    left: 18px;
    vertical-align: middle;
  }

}
.path {
  display: inline-block;
  height: $barHeight;
  line-height: $barHeight;
  color: $fontColor;
}
.file {
  input {
    position:absolute;
    width:0;
    overflow:hidden;
    opacity:0;
  }

  &:before {
    width: $filesWidth;
    height: $filesHeight;
    margin-top: -($filesHeight/2);
    background: no-repeat center url("assets/images/files.png");
  }

  &[title]:not([title=""]):before{
    content:attr(title);
    color:#162f44;
  }

  &.afterIcon{
    &:after {
      content: "";
      display: inline-block;
      position: absolute;
      top: 50%;
      right: 12px;
      width: 20px;
      height: 20px;
      margin-top: -(20px/2);
      line-height: 20px;
      background: url("assets/images/add@2x.png") no-repeat center;
      background-size: cover;
    }
  }
}
